<template>
  <div class="home-index">
    <h2>
      <img src="https://static.emeker.com/mk-wx-logo.png">
      <p>mk-ui</p>
    </h2>
    <p>
      基于 Vue.js 实现的精致移动端组件库
    </p>
    <div class="ghbtns">
      <a href="https://gitee.com/emeker/mk-ui">
      </a>
    </div>
    <section class="features">
      <!--       <h3>Features</h3> -->
      <ul>
        <li>
          <h1>质量可靠</h1>
          由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。
        </li>
        <li>
          <h1>体验极致</h1>
          以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
        </li>
        <li>
          <h1>标准规范</h1>
          遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
        </li>
        <li>
          <h1>扩展性强</h1>
          支持按需引入和
          <router-link to="/zh-CN/docs/post-compile">后编译</router-link>，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
        </li>
      </ul>
    </section>
    <footer>
      <a href="https://gitee.com/emeker/mk-ui">© eme</a>
    </footer>
  </div>
</template>

<script>
export default {}
</script>
<style lang="scss">
.home-index {
  position: relative;
  padding-bottom: 36px;
  min-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  background: url('//webapp.didistatic.com/static/webapp/shield/mk-ui-home-index-background.png')
    no-repeat fixed center;
  background-size: cover;

  > h2 {
    margin: 80px 0 20px;
    font-size: 30px;
    img {
      width: 120px;
    }

    @media screen and (max-width: 960px) {
      margin: 50px 0 10px;
    }

    p {
      margin-top: 30px;
    }
  }

  > p {
    margin: 20px 0;
  }

  > footer {
    position: absolute;
    bottom: 0;
    width: 100%;

    a {
      display: inline-block;
      padding: 10px 20px;
      color: #666;
    }
  }
}

.ghbtns {
  a {
    display: inline-block;
  }
}

.features {
  margin: 60px auto 40px;

  @media screen and (max-width: 960px) {
    margin: 30px auto 10px;
  }

  > ul {
    display: flex;
    padding: 0 10px;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    color: #666;

    @media screen and (max-width: 960px) {
      flex-direction: column;
    }

    li {
      flex: 1;
      max-width: 160px;
      padding: 10px 16px 20px;
      margin: 0 10px;
      border-top: 1px solid #4a4c5b;
      font-size: 13px;
      line-height: 1.4;
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);

      @media screen and (max-width: 960px) {
        max-width: initial;
        margin-bottom: 20px;
      }

      h1 {
        padding: 10px 0;
        text-align: center;
        font-size: 15px;
      }
    }
  }
}
</style>
